<template>
	<view :class="'theme-'+theme">
		<!-- 提示窗示例 -->
		<uni-popup ref="fullCartDialog" type="dialog">
			<view class="uni-tip">
				<text class="uni-tip-title">提示</text>
				<view class="popup-content uni-tip-content">
					购物车装不下啦，请清理后再试！
				</view>
				<view class="uni-tip-group-button">
					<text class="uni-tip-button" @click="closeFullCartDialog()">取消</text>
					<navigator url="/pages/cart/cart" open-type="switchTab" class="uni-tip-button confirm">
						<text>前往购物车</text>
					</navigator>
				</view>
			</view>
		</uni-popup>
		<view class="navbar-fixed">
			<view class="navbar-content">
				<uni-icons @click="back" style="margin-right: 10rpx;" type="arrowleft" size="25" color="#252525">
				</uni-icons>
				<view class="navbar-search themeBorderColor">
					<view class="navbar-search_icon" @click="toSearch">
						<uni-icons type="search" size="16" color="#999"></uni-icons>
					</view>
					<view style="width: 100%;">
						<input @click="toSearch" disabled class="navbar-search_text" confirm-type="search" type="text"
							v-model="searchKey" placeholder="请输入您要搜索的内容" />
					</view>
				</view>
			</view>
		</view>
		<view class="navbar">
			<view class="nav-item flex1" :class="{current: filterIndex === 0}" @click="tabClick(0)">
				综合
			</view>
			<view class="nav-item flex1" :class="{current: filterIndex === 2}" @click="tabClick(2)">
				<text>价格</text>
				<view class="p-box">
					<text :class="{themeTextColor: sortType === 10 && filterIndex === 2}" class="yticon icon-shang"></text>
					<text :class="{themeTextColor: sortType === 11 && filterIndex === 2}" class="yticon icon-shang xia"></text>
				</view>
			</view>
			<view class="nav-item flex1">
				<view class="yticon icon-fenlei1" @tap="orderbyChange">筛选</view>
				<fjj-condition ref="condition" @touchmove.stop color="#fa436a" :list="filterMenuList"
					@result="resultConditon">
				</fjj-condition>
			</view>
		</view>
		<view class="content">
			<view class="product-list">
				<template v-for="(item, index) in goodsList">
					<view class="product-item" :key="index" @click="navToDetailPage(item)">
						<image class="left" :src="item.thumbnail" mode="aspectFit"></image>
						<view class="right">
							<text class="title more-t">{{item.goodsName}}</text>
							<view class="money-box" v-if="hasLogin||isShowPriceUnlogin==1">
								<text class="price">{{item.goodsPrice}}</text>
							</view>
							<view class="money-box" v-else>
								<text style="color: #fa436a;">******</text>
							</view>
							<view class="bottom">
								<view style="font-size: 14px;color: grey;">
									{{item.supplierName}}
								</view>
								<image src="../../static/cart.png" mode="widthFix" @click.stop="addCart(item)">
								</image>
							</view>
						</view>
					</view>
				</template>
				<uni-load-more :status="loadingType"></uni-load-more>
			</view>
			<image class="top-back" src="../../static/top-back.png" v-show="showToTop" @click="toTop()"></image>
			<image class="cart-icon" src="../../static/cart-icon.png" @click="toCart()"></image>
		</view>
	</view>
</template>

<script>
	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
	import {
		addToCart
	} from '../../api/cart/cart.js'
	import {
		getClassGoodLists,
		getPriceAndAmount,
		getNewList
	} from '@/api/product/list.js';
	import {
		mapState
	} from 'vuex';
	import {
		category
	} from '../../api/category/category.js';
	import {qryConfByItemCode} from '@/api/user/user.js'
	export default {
		components: {
			uniLoadMore
		},
		data() {
			return {
				isShowPriceUnlogin: uni.getStorageSync('isShowPriceUnlogin')||0,
				goodsSupplierShowConfigForm: {
					"goodsShowRule_supplierInfoShow": ""
				},
				cateMaskState: 0, //分类面板展开状态
				headerPosition: "fixed",
				headerTop: "44px",
				loadingType: 'more', //加载更多状态
				filterIndex: 0,
				cateId: -1, //已选三级分类id
				sortType: 1, //1 默认
				cateList: [],
				deptInfo: {},
				showToTop: false,
				listScrollTop: 0,
				catalogList: [],
				params: {
					purchaserCatalogIds: [],
					priceMax: '',
					priceMin: '',
					supplierIds: []
				},
				purchaserCatalogIdsCopy: [],
				goodsList: [],
				integralRule: {
					'priceShowWay': 1
				},
				areaId: '',
				isShowPriceUnlogin: 0,
				backCatagory: '',
				catalogListIds: [],
				statusBarHeight: 20,
				/* 状态栏高度 */
				navBarHeight: 45,
				/* 导航栏高度 */
				windowWidth: 375,
				/* 窗口宽度 */
				/* 设定状态栏默认高度 */
				searchKey: '',
				/* 导航栏搜索框的值 */
				/*查询类型 1从分类tab页面 2首页热门品目 3首页全部商品 4商品搜索*/
				queryType: 0,
				fid: '',
				sid: '',
				// 筛选条件是否初始化
				isFilterInit: 0,
				filterMenuList: [{
						'title': '品目',
						'type': 'custom',
						'key': 'purchaserCatalogId',
						'isMutiple': true,
						'detailList': []
					},
					{
						'title': '价格',
						'type': 'rangenumber',
						'key': 'priceRange',
						'minPlaceholder': '￥最低价',
						'maxPlaceholder': '￥最高价'
					},
					{
						'title': '供应商',
						'type': 'custom',
						'key': 'supplierId',
						'isMutiple': true,
						'detailList': []
					}
				],
				// 商品参加活动列表
				productActivity: {},
				// 活动列表id映射map
				activityMap: {},
				selectedIndex: 0,
				defaultSelect: [],
				sList: [],
				tList: [],
				//用于保存品目id在品目分类中的数组下标
				catalogOrder: {},
				//伪数据撑起高度，因为构造完filterData之后，直接refs引用调用打开，在watch监听filterData变化之前
				filterData: [{
					"name": "分类",
					"type": 'hierarchy',
					"submenu": [{
						"name": '食品生鲜',
						"value": 'food',
						"submenu": [{
							"name": '食品',
							"value": 'food1',
							"submenu": [{
								"name": "可乐",
								"value": 'peisi'
							}]
						}]
					}]
				}],
				//用于保存尚未在filterData中建立的一级二级品目父子关系,key:firsetCatalogId value:[secondSubmenu]
				tmpSecondMap: {},
				//用于保存尚未在filterData中建立的二级三级品目父子关系,key:secondCatalogId value:[thirdSubmenu]
				tmpThirdMap: {},
				//从分类页跳转过来
				queryFromCatagory: false,
				// 广州银行-校验商品最低价
				isbuyMinPrice:false
			};
		},
		computed: {
			...mapState(['hasLogin'])
		},
		onLoad(options) {
			this.getConf()
			this.initParams()
			this.loadData();
		},
		onPageScroll(e) {
			//兼容iOS端下拉时顶部漂移
			if (e.scrollTop >= 0) {
				this.headerPosition = "fixed";
			} else {
				this.headerPosition = "absolute";
			}
			this.listScrollTop = e.scrollTop
			this.showToTop = this.listScrollTop > 0 ? true : false
		},
		//下拉刷新
		onPullDownRefresh() {
			this.loadData();
		},
		methods: {
			getConf(){
				const deptInfo = uni.getStorageSync('deptinfo')[0]
				qryConfByItemCode({code: "isbuyMinPrice",
					tenant_id: deptInfo.tenantId,
					dept_code: deptInfo.deptCode}).then(res=>{
						if(res.code===0){
							this.isbuyMinPrice = res.data.val == '1'
						}
				})
			},
			// 筛选返回值
			resultConditon(obj) {
				this.params.supplierIds = obj.result.supplierId
				if (obj.result.purchaserCatalogId.length > 0) {
					this.params.purchaserCatalogIds = obj.result.purchaserCatalogId
				} else {
					this.params.purchaserCatalogIds = this.purchaserCatalogIdsCopy
				}
				this.params.priceMin = obj.result.priceRangeMin ? obj.result.priceRangeMin : ''
				this.params.priceMax = obj.result.priceRangeMax ? obj.result.priceRangeMax : ''
				// 发起搜索
				// uni.showLoading({
				// 	title: '正在加载...'
				// })
				this.loadData()
				this.$refs.condition.visibleDrawer = false
			},
			orderbyChange(obj) {
				this.$refs.condition.visibleDrawer = true;
			},
			toSearch() {
				uni.navigateTo({
					url: '/pages/product/search'
				})
				// let key = this.searchKey
				// this.params.sortType = 1;
				// this.sortType = 1;
				// this.params.page = 1;
				// this.loadingType = 'more';
				// this.goodsList = [];
				// this.params.searchType = '1'
				// this.params.searchWords = key
				// this.params.goodsName = key
				// this.searchKey = key
				// this.isFilterInit = 0
				// this.loadData();
			},
			back() {
				uni.navigateBack()
			},
			initParams() {
				this.params.purchaserId = uni.getStorageSync('bizDeptInfo').deptId
				if (this.cateId !== -1) {
					this.params.purchaserCatalogIds.push(this.cateId)
					this.params.searchData.push(this.cateId)
					this.purchaserCatalogIdsCopy = this.params.purchaserCatalogIds
				}
			},
			async getAllCatalogs() {
				this.catalogList = await category().then(res => res.data);
				this.catalogListIds = this.catalogList.map(c => c.id)
				this.params.purchaserCatalogIds = this.catalogListIds;
				// this.params.purchaserId = uni.getStorageSync('bizDeptInfo').deptId
				this.purchaserCatalogIdsCopy = this.params.purchaserCatalogIds
				this.loadData();
			},
			selectConfirm(e) {
				let value = e.value;
				this.defaultSelect[0] = e.index;
				this.params.purchaserId = uni.getStorageSync('bizDeptInfo').deptId
				//一级品目为null == 查询全部商品
				if (value[0][0] == null) {
					this.queryType = 3;
					this.params.purchaserCatalogIds = this.catalogListIds;
				} else if (value[0][1] == null) {
					//查询一级品目下得所有商品
					let purchareIds = []
					purchareIds.push(value[0][0]);
					//构造二级品目id
					let secondCatalogIds = this.tmpSecondMap[value[0][0]].map(s => s.value);
					purchareIds.concat(secondCatalogIds);
					//构造三级品目id
					secondCatalogIds.forEach(s => {
						purchareIds.concat(this.tmpThirdMap[s].map(t => t.value));
					})
					this.params.purchaserCatalogIds = purchareIds
				} else if (value[0][2] == null) {
					//查询二级品目下所有商品
					let purchareIds = []
					purchareIds.push(value[0][1]);
					purchareIds.concat(this.tmpThirdMap[value[0][1]].map(t => t.value))
					this.params.purchaserCatalogIds = purchareIds
				} else {
					//查询三级品目
					let purchareIds = []
					purchareIds.push(value[0][2]);
					this.params.purchaserCatalogIds = purchareIds
				}
				this.purchaserCatalogIdsCopy = this.params.purchaserCatalogIds
				// 发起搜索
				this.isFilterInit = 0
				this.loadData();
				console.log('return_result', e)
			},
			async queryCatalogs() {
				uni.showLoading({
					title: '加载中'
				});
				if (!this.catalogList || this.catalogList.length < 1) {
					this.catalogList = await category().then(res => res.data);
				}
				if (this.catalogListIds.length == 0) {
					this.catalogListIds = this.catalogList.map(c => c.id)
				}
				if (JSON.stringify(this.catalogOrder) == '{}') {
					this.filterData[0]['submenu'] = [];
					this.catalogList.forEach(item => {
						if (item.parentId === '0' || item.treeDepth === 0) {
							//pid为父级id, 没有pid或者pid=0是一级分类
							this.filterData[0]['submenu'].push({
								"name": item.name,
								"value": item.id,
								"submenu": []
							});
							this.$set(this.catalogOrder, item.id, this.filterData[0]['submenu'].length - 1);
						} else if (item.treeDepth === 1) {
							//二级品目
							if (!this.tmpSecondMap[item.parentId]) {
								this.tmpSecondMap[item.parentId] = [];
							}
							this.tmpSecondMap[item.parentId].push({
								"name": item.name,
								"value": item.id,
								"submenu": []
							});
							this.$set(this.catalogOrder, item.id, this.tmpSecondMap[item.parentId].length - 1);
						} else {
							//三级品目
							if (!this.tmpThirdMap[item.parentId]) {
								this.tmpThirdMap[item.parentId] = [];
							}
							this.tmpThirdMap[item.parentId].push({
								"name": item.name,
								"value": item.id
							});
							this.$set(this.catalogOrder, item.id, this.tmpThirdMap[item.parentId].length - 1);
						}
					})
					//从tmpSecondMap和tmpThirdMap构建到filterData的三级父子关系
					Object.keys(this.tmpSecondMap).forEach(f => {
						//从tmpSecondMap和tmpThirdMap构建二三级父子关系
						this.tmpSecondMap[f].forEach(s => {
							s.submenu = this.tmpThirdMap[s.value]
						})
						//从tmpSecondMap到filterData构建一二级品目父子关系
						this.filterData[0]['submenu'][this.catalogOrder[f]].submenu = this.tmpSecondMap[f];
					})
					//匹配三级品目跳转过来得品目信息下标位置
					if (this.queryFromCatagory) {
						let newDefaultSelect = [];
						let defaultCatalog = [];
						defaultCatalog.push(this.catalogOrder[this.fid]);
						defaultCatalog.push(this.catalogOrder[this.sid]);
						defaultCatalog.push(this.catalogOrder[this.cateId]);
						newDefaultSelect.push(defaultCatalog);
						this.defaultSelect = newDefaultSelect;
					}
					console.log('this.defaultSelect', this.defaultSelect)
				}
				uni.hideLoading();
				this.$refs.filterCatagory.defaultSelected = this.defaultSelect;
				this.$refs.filterCatagory.togglePage(0)
				// this.defaultSelect = [[0,0]]
			},
			async getCatalogs(tid) {
				this.catalogList = await category().then(res => res.data)
				let catalog = this.catalogList.filter(c => c.id == tid)[0]
				//初始化参数
				this.params.purchaserId = uni.getStorageSync('bizDeptInfo').deptId
				this.params.searchData.push(tid)
				//判断是几级品类
				let purchareIds = []
				purchareIds.push(tid)
				//一级品类
				if (catalog.parentId === '0' || catalog.treeDepth === 0) {
					let secondCatalog = this.catalogList.filter(c => c.parentId == tid).map(c => c.id)
					purchareIds = purchareIds.concat(secondCatalog)
					secondCatalog.forEach(sId => {
						let third = this.catalogList.filter(c => c.parentId == sId).map(c => c.id)
						purchareIds = purchareIds.concat(third)
					})
					this.params.purchaserCatalogIds = purchareIds
				} else if (catalog.treeDepth === 1) {
					let third = this.catalogList.filter(c => c.parentId == tid).map(c => c.id)
					purchareIds = purchareIds.concat(third)
					this.params.purchaserCatalogIds = purchareIds
				} else {
					this.params.purchaserCatalogIds.push(tid)
				}
				this.purchaserCatalogIdsCopy = this.params.purchaserCatalogIds
				this.loadData();

			},
			//加载分类
			async loadCateList(fid, sid) {
				let list = await this.$api.json('cateList');
				let cateList = list.filter(item => item.pid == fid);

				cateList.forEach(item => {
					let tempList = list.filter(val => val.pid == item.id);
					item.child = tempList;
				})
				this.cateList = cateList;
			},
			//加载商品 ，带下拉刷新和上滑加载
			async loadData() {
				if (this.loadingType === 'loading') return
				this.loadingType === 'loading'
				uni.showLoading({
					mask: true,
					title: '正在加载...'
				})
				const myParams = {
					minPrice: this.params.priceMin || '',
					maxPrice: this.params.priceMax,
					catalogId: this.params.purchaserCatalogIds,
					supplierId: this.params.supplierIds
				}
				const goodsTemp = await getNewList(myParams)
				this.goodsList = goodsTemp || []
				this.loadingType = 'nomore'
				const supplierMap = {}
				const supplierIds = [...new Set(this.goodsList.map(item => {
					supplierMap[item.supplierId] = item.supplierName
					return item.supplierId
				}))]
				const supplierList = []
				if (supplierIds.length > 0) {
					supplierIds.forEach(item => {
						const supplierName = supplierMap[item]
						supplierList.push({
							supplierId: item,
							supplierName: supplierName
						})
					})
				}
				const catalogMap = {}
				const catalogIds = [...new Set(this.goodsList.map(item => {
					catalogMap[item.purchaserCatalogId] = item.purchaserCatalogName
					return item.purchaserCatalogId
				}))]
				const purchaserCatalogList = []
				if (catalogIds.length > 0) {
					catalogIds.forEach(item => {
						const catalogName = catalogMap[item]
						purchaserCatalogList.push({
							purchaserCatalogId: item,
							purchaserCatalogName: catalogName
						})
					})
				}
				let goodsJson = {}
				// 是否需要重新初始化筛选条件
				if (!this.isFilterInit) {
					this.filterMenuList.forEach(filter => {
						filter['detailList'] = []
					})
					if (purchaserCatalogList && purchaserCatalogList.length !== 0) {
						purchaserCatalogList.forEach(c => {
							this.filterMenuList[0]['detailList'].push({
								title: c.purchaserCatalogName,
								value: c.purchaserCatalogId
							})
						})
					}
					if (supplierList && supplierList.length !== 0) {
						supplierList.forEach(s => {
							this.filterMenuList[2]['detailList'].push({
								title: s.supplierName,
								value: s.supplierId
							})
						})
					}
					this.isFilterInit = 1
				}
				let goodsList = this.goodsList
				goodsList.forEach(p => {
					if (p.thumbnail && p.thumbnail.indexOf('gcycloud') != -1) {
						p.thumbnail = p.thumbnail.replace(/(.*)\./, '$1_300x300.')
					}
				})
				uni.stopPullDownRefresh();
				uni.hideLoading()
			},
			//筛选点击
			tabClick(index) {
				if (this.filterIndex === index && (index === 0)) {
					return;
				}
				if (index === 2) {
					this.filterIndex = index;
					this.sortType = this.sortType === 10 ? 11 : 10;
					// 10 价格asc 11 价格desc
					uni.showLoading({
						mask: true,
						title: '正在加载...'
					})
					this.goodsList = this.goodsList.sort((a, b) => {
						if (this.sortType === 10)
							return (a.goodsPrice || 0) - (b.goodsPrice || 0)
						else {
							return (b.goodsPrice || 0) - (a.goodsPrice || 0)
						}
					})
					this.goodsList.splice(0, 0)
					setTimeout(() => {
						uni.hideLoading()
					}, 300)
				} else if (index === 1) {
					this.filterIndex = index;
					this.sortType = this.sortType === 20 ? 21 : 20;
				} else if (index === 0) {
					this.filterIndex = index;
					this.sortType = 0;
					this.loadData()
				} else if (index === 3) {
					this.queryCatalogs()
					return;
				}
				uni.pageScrollTo({
					duration: 300,
					scrollTop: 0
				})
			},
			//显示分类面板
			toggleCateMask(type) {
				let timer = type === 'show' ? 10 : 300;
				let state = type === 'show' ? 1 : 0;
				this.cateMaskState = 2;
				setTimeout(() => {
					this.cateMaskState = state;
				}, timer)
			},
			//分类点击
			changeCate(item) {
				this.cateId = item.id;
				this.toggleCateMask();
				uni.pageScrollTo({
					duration: 300,
					scrollTop: 0
				})
				this.loadData();
			},
			//详情
			navToDetailPage(item) {
				let id = item.goodsId;
				uni.navigateTo({
					url: `/pages/product/product?id=${id}`
				})
			},
			scroll(e) {
				if (e.detail.scrollTop > 20) {
					this.showToTop = true;
					this.listScrollTop = e.detail.scrollTop;
				} else {
					this.showToTop = false;
				}
			},
			scrollToBottom() {
				this.loadData();
			},
			toTop() {
				// this.showToTop = false;
				this.listScrollTop = 0;
				uni.pageScrollTo({
					scrollTop: this.listScrollTop
				})
			},
			toCart() {
				uni.setStorageSync('backCatagory', '')
				uni.switchTab({
					url: '/pages/cart/cart'
				})
			},
			addCart(item,isMin=false) {
				if (!this.hasLogin) {
					uni.showModal({
						title: '提示',
						content: '您还未登录，不能进行此操作',
						confirmText: '去登录',
						cancelText: '取消',
						success: (suc) => {
							if (suc.confirm) {
								uni.navigateTo({
									url: '/pages/public/login'
								})
							}
						}
					})
				} else {
					if(this.isbuyMinPrice&&!isMin){
						this.queryLowestPriceGoods(item)
						return
					}
					let pType;
					let qType;
					if (item.goodsSourceType === 0) {
						pType = '02';
						qType = 1;
					} else {
						pType = '01';
						qType = 2;
					}
					var areaId = uni.getStorageSync('areaId')?uni.getStorageSync('areaId'):uni.getStorageSync('enterpriseInfo').areaId;
					let params = {num:1,goodsId:item.goodsId,areaId:areaId||this.areaId};
					addToCart(params).then(res => {
						if (res.code === 0) {
							this.$util.msg('加入购物车成功')
						} else if(res.code === 1001) {
						let msg = ''
						if(res.extra.productAvailability) {
							msg = res.extra.productAvailability.filter(item => !item.canPurchase).map(item => item.message).toString()
						}
						this.$util.msg(res.message+' '+msg)
					}else {
							if(res.message == '购物车装不下啦，请清理后再试！'){
								this.$refs.fullCartDialog.open()
							} else {
								this.$util.msg(res.message)
							}
						}
					})
				}
			},
			stopPrevent() {},
			// 批量获取商品活动专区
			getProductActivityBatch(goodsList) {
				let productIds = []
				goodsList.forEach(({
					goodsId
				}) => {
					productIds.push(goodsId)
				})
				getProductActivity(productIds).then(res => {
					if (res.code === 0) {
						this.productActivity = res.data.productActivityMap
						this.activityMap = res.data.activityMap
						this.$forceUpdate()
					} else {
						this.$util.msg('获取商品活动专区信息失败')
					}
				})
			},
			// 关闭弹窗
			closeFullCartDialog() {
				this.$refs.fullCartDialog.close()
			}
		},
	}
</script>

<style lang="scss">
	page,
	.content {
		background: $page-color-base;
		height: 100%;
	}

	.navbar-fixed {
		position: sticky;
		top: 0;
		left: 0;
		z-index: 99;
		width: 100%;
		background-color: #fff;

		.navbar-content {
			display: flex;
			justify-content: center;
			align-items: center;
			padding: 0 30rpx 0 16rpx;
			height: 90rpx;
			box-sizing: border-box;

			.navbar-search {
				display: flex;
				align-items: center;
				padding: 0 20rpx;
				width: 100%;
				height: 60rpx;
				border-radius: 40rpx;
				background-color: #fff;
				border: 1px solid transparent;

				.navbar-search_icon {
					// width: 10px;
					// height: 10px;
					margin-right: 10rpx;
				}

				.navbar-search_text {
					width: 100%;
					font-size: $my-font-size-middle;
					color: #999;
				}
			}

			&.search {
				padding-left: 0;

				.navbar-content__search-icons {
					margin-left: 10px;
					margin-right: 10px;
				}

				.navbar-search {
					border-radius: 5px;
				}
			}
		}

	}

	.navbar {
		position: sticky;
		top: 90rpx;
		display: flex;
		width: 100%;
		height: 80rpx;
		background: #fff;
		box-shadow: 0 2upx 10upx rgba(0, 0, 0, .06);
		z-index: 10;

		.nav-item {
			display: flex;
			justify-content: center;
			align-items: center;
			height: 100%;
			font-size: 30upx;
			color: $font-color-dark;
			position: relative;

			&.flex1 {
				flex: 1;
			}

			&.auto {
				min-width: 25%;
				width: fit-content;
			}

			&.current {
				color: $base-color;

				&:after {
					content: '';
					position: absolute;
					left: 50%;
					bottom: 0;
					transform: translateX(-50%);
					width: 120upx;
					height: 0;
					border-bottom: 4upx solid $base-color;
				}
			}
		}

		.p-box {
			display: flex;
			flex-direction: column;

			.yticon {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 30upx;
				height: 14upx;
				line-height: 1;
				margin-left: 4upx;
				font-size: 26upx;
				color: #888;
			}

			.xia {
				transform: scaleY(-1);
			}
		}

		.cate-item {
			display: flex;
			justify-content: center;
			align-items: center;
			height: 100%;
			width: 80upx;
			position: relative;
			font-size: 44upx;

			&:after {
				content: '';
				position: absolute;
				left: 0;
				top: 50%;
				transform: translateY(-50%);
				border-left: 1px solid #ddd;
				width: 0;
				height: 36upx;
			}
		}
	}

	.product-list {
		position: relative;
		// height: calc(100% - 40px - 44px);
		display: flex;
		padding-top: 16rpx;
		// padding-bottom: env(safe-area-inset-bottom);
		flex-direction: column;

		.product-item {
			display: flex;
			padding: 16rpx 30rpx;
			background-color: #fff;
			// border-radius: 10rpx;
			// margin: 0 10rpx 10rpx 10rpx;

			.left {
				width: 220rpx;
				height: 220rpx;
				border-radius: 10rpx;
				background-color: $border-color-light;
			}

			.right {
				flex: 1;
				margin-left: 20rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-between;

				.title {
					// height: 40px;
					text-align: left;
					color: $font-color-dark;
					font-size: $my-font-size-base;
				}

				.money-box {
					text-align: left;
					color: $base-color;

					.tag {
						align-items: center;
						padding: 6upx 10upx;
						background: $uni-color-primary;
						font-size: $font-sm;
						color: #fff;
						border-radius: 6upx;
						line-height: 1;
						margin: 5rpx 14rpx 5rpx 0
					}

					.integral {
						display: inline-block;
						color: $uni-color-primary;
						font-size: $my-font-size-base;

						&:before {
							background: url(../../static/money.png) no-repeat;
							width: $my-font-size-sm;
							height: $my-font-size-sm;
							margin-right: 4rpx;
							display: inline-block;
							content: '';
							background-size: contain;
						}

						&:after {
							margin-left: 4rpx;
							content: '积分';
							// color: #909090;
							font-size: $my-font-size-sm;
						}
					}

					.split {
						font-size: $my-font-size-middle;
						// color: $base-color;
					}

					.price {
						display: inline-block;
						// color: #300313;
						font-size: $my-font-size-base;

						&:before {
							font-size: $my-font-size-sm;
							display: inline-block;
							content: '￥';
						}
					}
				}

				.bottom {
					display: flex;
					justify-content: space-between;
					align-items: center;

					image {
						width: 80rpx;
						margin-left: 20rpx;
					}
				}
			}
		}
	}

	/* 分类 */
	.cate-mask {
		position: fixed;
		left: 0;
		top: var(--window-top);
		bottom: 0;
		width: 100%;
		background: rgba(0, 0, 0, 0);
		z-index: 95;
		transition: .3s;

		.cate-content {
			width: 630upx;
			height: 100%;
			background: #fff;
			float: right;
			transform: translateX(100%);
			transition: .3s;
		}

		&.none {
			display: none;
		}

		&.show {
			background: rgba(0, 0, 0, .4);

			.cate-content {
				transform: translateX(0);
			}
		}
	}

	.cate-list {
		display: flex;
		flex-direction: column;
		height: 100%;

		.cate-item {
			display: flex;
			align-items: center;
			height: 90upx;
			padding-left: 30upx;
			font-size: 28upx;
			color: #555;
			position: relative;
		}

		.two {
			height: 64upx;
			color: #303133;
			font-size: 30upx;
			background: #f8f8f8;
		}

		.active {
			color: $base-color;
		}
	}

	/* 商品列表 */
	.goods-list-view {
		width: 100%;
		height: 810rpx;
	}

	.goods-list {

		display: flex;
		flex-direction: column;
		height: 810rpx;
		align-items: center;

		.goods {
			display: flex;
			flex-wrap: wrap;
			padding: 0 30upx;
			padding-top: 16rpx;
			height: 810rpx;
			// background: #fff;

			.goods-item {
				display: flex;
				flex-direction: column;
				width: 48%;
				background-color: #fff;
				border-radius: 10rpx;
				padding: 16rpx;
				margin-bottom: 20rpx;

				&:nth-child(2n+1) {
					margin-right: 4%;
				}
			}

			.image-wrapper {
				width: 100%;
				height: 300upx;
				border-radius: 3px;
				background-color: #fff;

				image {
					width: 100%;
					height: 100%;
					opacity: 1;
				}
			}

			.title {
				font-size: 15px;
				height: 40px;
				color: $font-color-dark;
				// line-height: 80upx;
			}

			.bottom {
				width: 100%;
				margin-top: 8rpx;
				display: flex;
				justify-content: space-between;

				.left {
					display: flex;
					flex-direction: column;

					.integral {
						color: $uni-color-primary;
						font-size: 17px;

						&:before {
							background: url(../../static/money.png) no-repeat;
							width: 24rpx;
							height: 24rpx;
							margin-right: 4rpx;
							display: inline-block;
							content: '';
							background-size: contain;
						}

						&:after {
							margin-left: 4rpx;
							content: '积分';
							color: #909090;
							font-size: 12px;
						}
					}

					.price {
						padding-left: 24rpx;
						text-align: left;
						display: block;
						font-size: 13px;
						color: #646464;
					}
				}

				.right {
					display: flex;
					align-items: center;

					image {
						width: 80rpx;
						height: 80rpx;
					}
				}
			}

			.price-box {
				margin-top: 8rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding-right: 10upx;
				font-size: 24upx;
				color: $font-color-light;
			}

			.price {
				font-size: $font-lg;
				color: $uni-color-primary;
				line-height: 1;

				// &:before {
				// 	content: '￥';
				// 	font-size: 26upx;
				// }
			}
		}
	}

	.cart-icon,
	.top-back {
		width: 85rpx;
		height: 85rpx;
		position: fixed;
		right: 30rpx;
		bottom: 170rpx;
		-webkit-overflow-scroll: touch;
	}

	.top-back {
		bottom: 270rpx;
	}

	.uni-tip {
		overflow: hidden;

		.popup-content {

			.cancel-reason {
				width: 100%;
				height: 102rpx;
				line-height: 100%;
				padding: 16rpx;
				color: #303133;
				font-size: $my-font-size-base;
				border: 1px solid #f5f5f5;
				border-radius: 10rpx;
			}
		}

		.uni-tip-group-button {
			border-top: none;

			.uni-tip-button {
				border-top: 1px solid #e2e2e2;
				display: flex;
				align-items: center;
				line-height: normal;
				justify-content: center;

				&.confirm {
					border-top: 1rpx solid $base-color;
					border-bottom: 1rpx solid $base-color;
					color: #fff;
					background-color: $base-color;
				}
			}
		}
	}
</style>
